<template>
<div class="normal-login-container">
  <div class="logo-content flex-column">
    <van-image width="80" height="45"
      src="http://120.26.54.74/wish-service/profile/upload/2023/static/image/logo-title.png" />
    <div class="title">新人登录即享￥500奖励券</div>
  </div>

  <div class="login-form-content" v-show=" isOnceLogin ">
    <div class="tips">中国移动认证</div>
    <div class="phoneNo">152****8848</div>

    <div class="once-login-btn">
      <van-button round size="large" color="#806DF9" type="primary" 
      :loading="btnLoading" @click=" onceLogin " loading-text="登录中">一键登录</van-button>
    </div>
    <div class="phone-login" @click="isOnceLogin = !isOnceLogin">手机号登录</div>
  </div>

  <div class="login-phone-form" v-show=" !isOnceLogin ">
    <div class="default-login-btn">
      <van-button round size="large" color="#806DF9" type="primary" 
        :loading="btnLoading" @click=" handleLogin " loading-text="登录中">登 录</van-button>
      <div class="once-login" @click="isOnceLogin = !isOnceLogin">一键登录</div>
    </div>
  </div>

  <div class="footer flex-column align-center">
    <div class="other-title">其它登录方式</div>
    <van-image width="29" height="29"
      src="http://120.26.54.74/wish-service/profile/upload/2023/static/image/wechat-icon.png" />
    <div class="primary">
      登录即表示同意<text @click=" handleUserAgrement ">《用户协议》</text>
      <text @click=" handlePrivacy ">《隐私政策》</text>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isOnceLogin = ref(true)
const btnLoading = ref(false)

const onceLogin = () => {
  console.log('onceLogin')
  btnLoading.value = true

  setTimeout(() => {
    btnLoading.value = false
  }, 2000)
}
const handleLogin = () => {
  console.log('onceLogin')
}

// 隐私协议和用户政策
const handlePrivacy = () => {
  console.log('onceLogin')
}
const handleUserAgrement = () => {
  console.log('onceLogin')
}
</script>

<style lang="scss" scoped>
.normal-login-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: url('http://120.26.54.74/wish-service/profile/upload/2023/static/image/login-bg.png') no-repeat;
  background-size: 100%;

  .logo-content {
    width: 100%;
    padding-top: 118px;
    justify-content: center;
    align-items: center;

    .title {
      margin-top: 27px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  .login-phone-form {
    width: calc(100vw - 32px);
    height: 247px;
    position: absolute;
    top: 298px;
    left: 16px;

    .get-code {
      width: 90px;
      height: 100%;
      position: absolute;
      right: 20px;
      bottom: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .text {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    .default-login-btn {
      margin-top: 14px;
    }

    .once-login {
      font-size: 14px;
      line-height: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #fff;
      margin-top: 15px;
      margin-top: 12px;
      text-align: center;
    }
  }

  .login-form-content {
    width: calc(100vw - 32px);
    height: 247px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 283px;
    left: 16px;
    text-align: center;
    padding: 0 22px;

    .tips {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #777777;
      line-height: 12px;
      margin-top: 40px;
    }

    .phoneNo {
      font-size: 31px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #222222;
      line-height: 31px;
      margin-top: 22px;
    }

    .once-login-btn {
      margin-top: 40px;
    }

    .phone-login {
      font-size: 12px;
      line-height: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #777777;
      margin-top: 16px;
    }
  }

  .footer {
    width: 100vw;
    text-align: center;
    position: absolute;
    bottom: 36px;
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;

    .other-title {
      line-height: 10px;
      margin-bottom: 28px;
    }

    .primary {
      line-height: 10px;
      margin-top: 34px;
    }
  }
}
</style>